<template>
  <div>
    <div style="width:100%;height:440px;" id="map"></div>
  </div>
</template>

<script>
import BMap from 'BMap'
import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'
export default {
  name: 'contactmap',
  mounted () {
    this.baiduMap()
  },
  methods: {
    baiduMap () {
      function initMap () {
        createMap()// 创建地图
        setMapEvent()// 设置地图事件
        addMapControl()// 向地图添加控件
        addMapOverlay()// 向地图添加覆盖物
      }
      function createMap () {
        map = new BMap.Map('map')
        map.centerAndZoom(new BMap.Point(120.324426, 30.301179), 19)
      }
      function setMapEvent () {
        map.enableScrollWheelZoom()
        map.enableKeyboard()
        map.enableDragging()
        map.enableDoubleClickZoom()
      }
      function addClickHandler (target, window) {
        target.addEventListener('click', function () {
          target.openInfoWindow(window)
        })
      }
      function addMapOverlay () {
        var markers = [
          {content: '', title: '纳品网线下体验店地址', imageOffset: {width: 0, height: 3}, position: {lat: 30.30185, lng: 120.32448}}
        ]
        for (var index = 0; index < markers.length; index++) {
          var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat)
          var marker = new BMap.Marker(point, {icon: new BMap.Icon('http://api.map.baidu.com/lbsapi/createmap/images/icon.png', new BMap.Size(20, 25), {
            imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
          })})
          var label = new BMap.Label(markers[index].title, {offset: new BMap.Size(25, 5)})
          var opts = {
            width: 200,
            title: markers[index].title,
            enableMessage: false
          }
          var infoWindow = new BMap.InfoWindow(markers[index].content, opts)
          marker.setLabel(label)
          addClickHandler(marker, infoWindow)
          map.addOverlay(marker)
        };
      }
      // 向地图添加控件
      function addMapControl () {
        var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT})
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL)
        map.addControl(scaleControl)
        var navControl = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE})
        map.addControl(navControl)
        var overviewControl = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true})
        map.addControl(overviewControl)
      }
      var map
      initMap()
    }
  }
}
</script>

<style scoped>
  .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
  .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
